<template>
    <div class="message-text" v-html="emojiParse(message.content)" v-if="message.msgtype === 1 || message.msgtype === 15">
    </div>
    <div v-else-if="message.msgtype === 2">
        <el-image
            class="message-image"
            :src="config.apiUrl+message.src"
            fit="contain">
                <div slot="placeholder" class="message-image-slot">
                    加载中<span class="dot">...</span>
                </div>
                <div slot="error" class="message-image-slot">
                    <i class="el-icon-picture-outline"></i>
                </div>
            </el-image>
    </div>
    <div v-else-if="message.msgtype === 3">
        表情{{message}}
    </div>
    <div v-else-if="message.msgtype === 4">
        <video-player
            v-if="message.src"
            :src="config.apiUrl+message.src"
            class="video"
        /> 
    </div>
    <div v-else-if="message.msgtype === 16">
        转发 From:{{ message.forwardWxid }} ID: {{ message.forwardMsgId}}
    </div>
    <div class="message-file" v-else-if="message.msgtype === 6">
        <div class="file-icon">
            <i class="el-icon-document"></i>
        </div>
        <div class="message-file-info">
            <span class="title">{{message.title||message.src}}</span>
            <span class="desc">{{message.src}}</span>
        </div>
    </div>
    <div class="message-link" v-else-if="message.msgtype === 10">
        <el-image
            class="message-link-img"
            :src="message.src"
        >
            <div slot="placeholder" class="image-slot">
                <i class="el-icon-link"></i>
            </div>
            <div slot="error" class="image-slot">
                <i class="el-icon-link"></i>
            </div>

        </el-image>
        <div class="message-link-info">
            <span class="title">{{message.title}}</span>
            <span class="desc">{{message.content}}</span>
            <span class="desc">{{message.url}}</span>
            
        </div>
        
    </div>
    <div v-else-if="message.msgtype === 11">
        小程序{{message}}
    </div>
    <div class="message-friend-card" v-else-if="message.msgtype === 13">
        <div class="info">
          <el-avatar shape="square" :size="44" fit="cover" class="avatar" :src="message.src" />
          <div class="text-wrap" style="">
            <span class="name">{{ message.title }}</span>
            <span class="account">{{message.alias||message.wxid}}</span>
          </div>
        </div>
        <div class="footer" style="border-top:1px solid #ddd;padding:10px 0;color:#aaa;font-size:12px;">
          {{ message.certflag == 0?'个人名片':'公众号名片' }}
        </div>

    </div>
</template>
<script>
import emojiParse from '@/lib/wechat-emoji'
import videoPlayer from '@/components/videoPlayer'

export default {
    name:'messageCard',
    components:{videoPlayer},
    props:{
        message:{
            type:Object,
            default:{}
        }
    },
    methods:{
        emojiParse
    }   
}
</script>
<style scoped>
.message-text{
    color: #333;
    font-size: 16px;
    word-break: break-all;
    
}
.message-image{
    width: 100px;
    height: 100px;
    background-color: #f1f1f1;
    border-radius: 3px;
}
.message-image-slot{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    color: #999;
    font-size: 14px;
    
}
.video{
    width: 100px;
}
.message-link{
    display: flex;
    flex-direction: row
}
.message-link-img{
    width:44px;
    height:44px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #f1f1f1 ;  
    border-radius: 3px;
    color: #666;
}
.message-image .image-slot{
}
.message-link-info{
    display: flex;
    flex-direction: column;
    margin-left: 10px;
    justify-content:space-around;
    word-break: break-all;
    overflow: hidden;
}
.message-link-info .title{
    font-size:16px; 
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;  
}
.message-link-info .desc{
    font-size:12px;
    color: #999 ;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; 
}
/* file */
.message-file{
    display: flex;
    flex-direction: row
}
.message-file .file-icon{
    width:44px;
    height:44px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #f1f1f1 ;  
    border-radius: 3px;
    color: #666;
    font-size: 26px
}
 
.message-file-info{
    display: flex;
    flex-direction: column;
    margin-left: 10px;
    justify-content:space-around;
    word-break: break-all;
    overflow: hidden;
}
.message-file-info .title{
    font-size:16px; 
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
}
.message-file-info .desc{
    font-size:12px;
    color: #999 ;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; 
}
/* friend card */
.message-friend-card .avatar{
    flex-shrink: 0
}
.message-friend-card .info{
    display: flex;
    flex-direction: row;
    padding-bottom: 10px;

}
.message-friend-card .text-wrap{
    display: flex;
    flex-direction: column; 
    justify-content:space-around;
    margin-left: 10px;
    overflow: hidden;
}
.message-friend-card .name{
    font-size:16px; 
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; 
}
.message-friend-card .account{
    font-size:12px; 
    color: #666;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; 
    line-height: 14px; 
}
</style>